<template>
	<view class="vui-flex">
		<block v-for="(it, k) in vuiData" :key="k">
			<view class="vui-flex-i" :style="{flex:'0 0'+'0 0'+ (100/vuiLen)+'%'}" @click="action(it)">
				<image :src="it.icon" lazy-load="true" v-if="it.icon"></image>
				<image class="no-img" v-else></image>
				<text>{{it.name}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	/**
	 * @des 首页入口/弹性盒子布局基础组件
	 */
	export default {
		name: 'vui-entry',
		props: ['vuiData', 'vuiLen'],
		methods: {
			/**
			 * @des 执行action函数
			 */
			action(val) {
				this.$emit('vuiEntry', val);
			}
		}
	}
</script>

<style lang="scss">
	/* entry */
	.vui-flex {display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 10upx; padding: 35upx 20upx; background-color: #fff;}
	.vui-flex .vui-flex-i {margin: 10upx 0;}
	.vui-flex .vui-flex-i image {width: 90upx; height: 90upx; border-radius: 100%;}
	.vui-flex .vui-flex-i text {display: block; font-size: 26upx; color: #888;}
</style>
